<template>
  <div class="table">
    <!-- :span-method="arraySpanMethod" -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :span-method="arraySpanMethod"
      stripe
      border
      :header-cell-style="tableHeaderColor"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="index" :index="indexMethod" width="50"> -->
      <!-- </el-table-column> -->
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="ClientName" label="客户名称" width="">
        <template slot-scope="scope">
          {{ scope.row.ClientName }}
        </template>
      </el-table-column>
      <el-table-column prop="BrandName" label="品牌" width="">
      </el-table-column>
      <el-table-column prop="EndDate" label="报备有效期" width="">
      </el-table-column>
      <el-table-column prop="ModifyDate" label="修改日期" width="">
        <template slot-scope="scope">
          {{ scope.row.ModifyDate }}
        </template>
      </el-table-column>
      <el-table-column prop="StatusDesc" label="报备状态" width="">
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <!-- <el-button type="danger" size="small"
                                   icon="el-icon-delete"
                                   @click="handleDelete(scope.row)">删除</el-button> -->
          <el-button type="primary" size="small" icon="el-icon-info"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="toggleSelection([tableData[2]])">切换行数</el-button>
  </div>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
      activeName: "phoneInfoTabs",

      key: "ClientName",
      spanArr: [],
      position: 0,
      tableData: [
        {
          Key: "阿特斯光伏科技(苏州）有限公司",
          reports: [
            {
              ID: "F825480F-C76B-42BE-A63C-60D5DB06D471",
              ClientID: "Ep20210820006",
              ClientName: "阿特斯光伏科技(苏州）有限公司",
              BrandName: "SGMICRO(圣邦微)",
              EndDate: "2024-06-21 15:44:21",
              StatusDesc: "失败",
              ModifyDate: "2022-06-21 15:44:21",
              Summary: "王总批量导入。2022-6-21",
            },
          ],
        },
        {
          Key: "艾伏新能源科技（上海）股份有限公司",
          reports: [
            {
              ID: "972B99F5-680E-4FE9-9678-CA0BED6A162B",
              ClientID: "E7F2265FD7221404544F62C2D979207B",
              ClientName: "艾伏新能源科技（上海）股份有限公司",
              BrandName: "SGMICRO(圣邦微)",
              EndDate: "2024-06-21 15:44:21",
              StatusDesc: "失败",
              ModifyDate: "2022-06-21 15:44:21",
              Summary: "王总批量导入。2022-6-21",
            },
            {
              ID: "847F3330-3C67-4755-98BD-4F3FAA5820C8",
              ClientID: "E7F2265FD7221404544F62C2D979207B",
              ClientName: "艾伏新能源科技（上海）股份有限公司",
              BrandName: "BL(上海贝岭)",
              EndDate: "2024-06-21 15:44:11",
              StatusDesc: "成功",
              ModifyDate: "2022-06-21 15:44:11",
              Summary: "王总批量导入。2022-6-21",
            },
          ],
        },
        {
          Key: "艾康生物技术（杭州）有限公司",
          reports: [
            {
              ID: "A00A24F2-CC9A-4E09-9018-CE48E44D1DF8",
              ClientID: "17A36017D2C9E86D7C4B1D7D2C6C5C62",
              ClientName: "艾康生物技术（杭州）有限公司",
              BrandName: "TKD(泰晶)",
              EndDate: "2024-06-21 15:44:10",
              StatusDesc: "失败",
              ModifyDate: "2022-06-21 15:44:10",
              Summary: "王总批量导入。2022-6-21",
            },
          ],
        },
        {
          Key: "艾欧创想智能科技(武汉)有限公司",
          reports: [
            {
              ID: "B620DECB-B3CF-4DC5-9776-C03718C2E4E5",
              ClientID: "E83DABD28B5D7A2487BCF3656FA61CE7",
              ClientName: "艾欧创想智能科技(武汉)有限公司",
              BrandName: "SGMICRO(圣邦微)",
              EndDate: "2024-06-21 15:44:21",
              StatusDesc: "失败",
              ModifyDate: "2022-06-21 15:44:21",
              Summary: "王总批量导入。2022-6-21",
            },
          ],
        },
      ],
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property == [this.key] || columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 修改table header的背景色
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #f7f8fb;color: #666;";
      }
    },
    // 列表序号索引
    indexMethod(index) {
      return (
        (this.queryParams.page - 1) * (this.queryParams.pageSize || 10) +
        index +
        1
      );
    },
    handleSelectionChange(val) {
      val.length >= 2 && this.$refs.multipleTable.clearSelection();
      val.length >= 2 &&
        this.$refs.multipleTable.toggleRowSelection(val[val.length - 1]);

      this.multipleSelection = val;
      console.log(val);
    },
  },
  created() {
    let arr = [];
    this.tableData.length &&
      this.tableData.forEach((item) => {
        item.reports.length &&
          item.reports.forEach((item_) => {
            item_.ClientName = item.Key;
            arr.push(item_);
          });
      });

    this.tableData = arr;
    this.tableData.sort((a, b) => {
      if (a["ClientName"] != b["ClientName"]) {
        return a["ClientName"].localeCompare(b["ClientName"]);
      }
    });

    this.spanArr = [];
    this.position = 0;
    this.tableData.forEach((item, index) => {
      if (index === 0) {
        // 第一列默认push一个1 然后position位置为0
        this.spanArr.push(1);
        this.position = 0;
      } else {
        //除第一列以外就判断 后一个和前一个要合并的值是否相同
        if (
          this.tableData[index][this.key] ===
          this.tableData[index - 1][this.key]
        ) {
          //相同 就给spanArr位置变量position的值+1
          this.spanArr[this.position] += 1;
          //然后往列表中push 0 占位 并且当前位置rowspan值为0 不展示达到合并效果
          this.spanArr.push(0);
        } else {
          //否则就 push 1 证明需要合并的值不想同,无发合并 rowspan值为 1
          this.spanArr.push(1);
          //位置变量再继续 设置为当前列id的值
          this.position = index;
        }
      }
    });
  },
};
</script>
<style scoped>
.table {
  width: 80%;
  margin: 0 auto;
}
</style>
